<template>
  <div>
    <div class="container">
      <el-form
        @submit.native.prevent
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px"
        class="topicForm"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="题型" prop="topicType">
              <el-select
                filterable
                v-model.number="form.topicType"
                placeholder="请选择题型"
                clearable
                @change="handleEditTopicTypeChange(form.topicType)"
              >
                <el-option
                  v-for="dict in dict.type.topic_type"
                  :key="Number(dict.value)"
                  :label="dict.label"
                  :value="Number(dict.value)"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              v-if="operationType < 5"
              label="知识点"
              prop="categoryId"
              :inline="true"
            >
              <el-cascader
                v-model="model.categoryId"
                :options="categoryTree"
                filterable
                clearable
                :props="{ expandTrigger: 'hover', checkStrictly: true }"
                @change="handleChange"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="题干图片" prop="contentPic">
          <div style="width: 100%; display: flex; justify-content: flex-start">
            <uploadImgOss
              :operationType="operationType"
              :type="3"
              :echo-file="form.contentPic ? form.contentPic.split(',') : []"
              :max-image-size="5"
              @uploadFiles="uploadFiles($event)"
            ></uploadImgOss>
          </div>
        </el-form-item>
        <el-form-item label="题干" prop="content">
          <el-input
            type="textarea"
            id="textarea"
            v-model="form.content"
            placeholder="请输入题干"
            @blur="campaignNameBlur"
            :autosize="{ minRows: 3, maxRows: 10 }"
          />
          <el-row v-if="form.topicType === 3">
            <el-button
              v-preventReClick
              type="primary"
              icon="el-icon-plus"
              style="width: 100px; height: 25px; padding: 0"
              plain
              @click="handleAddBlank"
              >插入填空符</el-button
            >
            <span style="margin-left: 15px"
              >*填空符由英文括号以及三个下划线组成,例: (___)</span
            ></el-row
          >
        </el-form-item>
        <!-- 选择题/填空题/简答题/实操题区块 -->
        <!-- TODO: 有时间把填空题输入框内的标签加上 -->
        <div
          v-if="
            form.topicType != null &&
            form.topicType != 2 &&
            form.topicType != 4 &&
            form.topicType != 5
          "
        >
          <el-table
            :data="form.ccTopicOptionList"
            ref="multipleTable"
            highlight-current-row
            style="width: 100%; margin-bottom: 22px"
            :header-cell-style="{ background: '#f4f3f9', color: '#606266' }"
            @selection-change="optionSelectionChange"
            class="drow_table"
            row-key="id"
            :row-style="rowStyle"
          >
            <el-table-column type="selection" min-width="3%" prop="trueOption">
            </el-table-column>
            <el-table-column prop="sort" label="拖拽排序" min-width="5%">
              <el-button
                v-preventReClick
                class="move"
                icon="el-icon-d-caret"
                circle
              ></el-button>
            </el-table-column>
            <el-table-column
              prop="optionLabel"
              min-width="5%"
              v-if="form.topicType === 0 || form.topicType === 1"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.optionLabel }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="optionIndexStr"
              min-width="5%"
              v-else-if="form.topicType === 3"
            >
              <template slot-scope="scope">
                <span>填空{{ scope.$index + 1 }}答案</span>
              </template>
            </el-table-column>
            <el-table-column
              label=""
              min-width="45%"
              v-if="form.topicType === 4 || form.topicType === 5"
            >
              <template slot-scope="scope">
                <el-form-item
                  :prop="'ccTopicOptionList.' + scope.$index + '.optionValue'"
                  :rules="rules.optionValue"
                  style="margin: 0"
                  label-width="0"
                >
                  <el-input
                    type="textarea"
                    v-model="scope.row.optionValue"
                    placeholder="请输入答案内容"
                    :autosize="{ minRows: 2, maxRows: 10 }"
                    @click.native.stop=""
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="" min-width="45%" v-else>
              <template slot="header" v-if="form.topicType === 3">
                <el-button
                  v-preventReClick
                  type="primary"
                  plain
                  icon="el-icon-paperclip"
                  @click="handleSetGroup()"
                  style="padding: 5px"
                  >设置分组</el-button
                >
                <el-button
                  v-preventReClick
                  type="danger"
                  plain
                  icon="el-icon-delete"
                  @click="handleDeleteGroup()"
                  style="padding: 5px; margin-right: 5px"
                  >取消分组</el-button
                >
                <el-tooltip placement="top">
                  <div slot="content" class="tips-content text-tips-content">
                    <span>提示</span><br />
                    <div class="rule-box">
                      1、每一空支持多个答案，答案之间使用英文符号&进行连接,例:
                      八&8<br />
                      2、支持多个相邻的填空之间不区分先后顺序，将不区分先后顺序的相邻答案前面勾选框勾选上，<br />
                      点击设置分组按钮，将勾选的答案设置为一组<br />
                      3、设置分组后，同一组答案的背景色相同，不同组答案的背景色不同<br />
                    </div>
                  </div>
                  <i class="el-icon-info" />
                </el-tooltip>
              </template>
              <template
                slot="header"
                v-else-if="form.topicType === 0 || form.topicType === 1"
              >
                <span>勾选设置正确答案</span>
              </template>
              <template slot-scope="scope">
                <el-form-item
                  :prop="'ccTopicOptionList.' + scope.$index + '.optionValue'"
                  :rules="rules.optionValue"
                  style="margin: 0"
                  label-width="0"
                >
                  <el-input
                    v-model="scope.row.optionValue"
                    placeholder="请输入选项内容"
                    @click.native.stop=""
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column min-width="7%">
              <template slot="header">
                <el-button
                  v-preventReClick
                  type="primary"
                  icon="el-icon-plus"
                  @click="addOption"
                  style="padding: 5px; float: right"
                  >添加选项</el-button
                >
              </template>
              <template slot-scope="scope">
                <el-button
                  v-preventReClick
                  size="mini"
                  type="danger"
                  style="width: 75px; float: right"
                  icon="el-icon-delete"
                  @click="deleteOption(scope.$index)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!--判断题区块 -->
        <div v-else-if="form.topicType === 2">
          <el-form-item label="正确答案" prop="trueOption">
            <el-radio-group v-model="form.right" ref="radioGroup">
              <el-radio :label="true">正确</el-radio>
              <el-radio :label="false">错误</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="难度" prop="difficulty">
              <el-select
                filterable
                v-model="form.difficulty"
                placeholder="请选择难度"
                clearable
              >
                <el-option
                  v-for="dict in dict.type.topic_difficulty"
                  :key="Number(dict.value)"
                  :label="dict.label"
                  :value="Number(dict.value)"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分值" prop="score">
              <el-input
                :min="0"
                v-model="form.score"
                placeholder="请输入分值"
                type="number"
                style="width: 150px"
                :rules="rules.score"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="试题解析" prop="resolve">
          <el-input
            v-model="form.resolve"
            type="textarea"
            placeholder="请输入内容"
            :autosize="{ minRows: 3, maxRows: 6 }"
          />
        </el-form-item>
        <el-form-item label="试题解析图片" prop="resolvePic">
          <div style="width: 100%; display: flex; justify-content: flex-start">
            <uploadImgOss
              :type="3"
              :echo-file="form.resolvePic ? form.resolvePic.split(',') : []"
              :max-image-size="5"
              @uploadFiles="uploadFiles($event, 'resolvePic')"
            ></uploadImgOss>
          </div>
        </el-form-item>
        <el-form-item
          label="是否需要设备"
          prop="needDevice"
          v-show="form.topicType === '5'"
        >
          <el-select
            filterable
            v-model="form.needDevice"
            placeholder="是否需要设备"
            clearable
          >
            <el-option
              v-for="dict in dict.type.need_device"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="formFooter">
      <el-button v-preventReClick @click="cancel">取 消</el-button>
      <el-button v-preventReClick type="primary" @click="submitForm"
        >确 定</el-button
      >
    </div>
  </div>
</template>

<script>
import {
  getTopicCategoryTree,
  addTopicCategory,
  delTopicCategoryAndChild,
  updateTopicCategory,
  getTopicCategoryName,
} from "@/api/exam/topicCategory";

import {
  getTopic,
  getPaperTopic,
  addTopic,
  updateTopic,
} from "@/api/exam/topic";

import { addPaperTopicFromPaper } from "@/api/exam/examPaperTopic";

import { addContainerTopic } from "@/api/exam/examPaperContainer";

import uploadImgOss from "@/components/uploadImgOss";

import Sortable from "sortablejs";

export default {
  name: "TopicForm",
  dicts: ["topic_type", "topic_difficulty", "need_device"],
  components: {
    uploadImgOss,
  },
  props: {
    operationType: {
      type: [String, Number],
      required: false,
    },
    needTitleId: {
      type: Boolean,
      default: true,
      required: false,
    },
    cid: {
      type: [String, Number, null],
      required: false,
    },
    propsCategoryId: {
      type: [String, Number, null],
      required: false,
    },
    isOfflineExam: {
      type: [Boolean],
      required: true,
    },
    showAll: {
      type: [Boolean],
      required: false,
    },
  },
  data() {
    return {
      model: {
        categoryId: "",
      },
      //默认选项
      defaultProps: {
        children: "children",
        label: "label",
      },
      //试题分类树
      categoryTree: [],
      //选项列表
      labelList: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
      ],
      //背景色列表
      colorList: [
        "#ffffff",
        "#eaf8e8",
        "#fff2cc",
        "#ffe6e6",
        "#e6f7ff",
        "#f3e5f5",
        "#fff0b3",
        "#f0ffff",
        "#ffffcd",
        "#d9ead3",
        "#fce5cd",
      ],
      //光标位置
      cursorPosition: 0,
      categoryTreeEdit: false,
      // 表单校验
      rules: {
        optionValue: { required: true, message: "请输入选项内容" },
        score: { required: true, message: "请输入分值" },
        topicType: { required: true, message: "请选择试题类型" },
        content: { required: true, message: "请输入题干" },
      },
      // 表单参数
      form: {
        contentPic: "",
        resolvePic: "",
      },
      // 判断题选项
      right: null,
    };
  },
  created() {},
  watch: {},
  methods: {
    //上传视频||图片
    uploadFiles(e, type) {
      if (type) {
        this.form.resolvePic = e.join(",");
      } else {
        this.form.contentPic = e.join(",");
      }
    },
    /**返回 */
    cancel() {
      this.$emit("cancel");
    },
    /**刷新分类树 */
    refreshCategoryTree() {
      if (this.operationType < 5) {
        getTopicCategoryTree(this.propsCategoryId).then((res) => {
          if (res.code === 200) {
            this.categoryTree = res.data;
          } else {
            this.$message.error({ message: res.msg, showClose: true });
          }
        });
      }
    },
    /**知识点 */
    handleChange(value) {
      if (value && value.length > 0) {
        this.form.categoryId = value[value.length - 1];
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          //判断是否选择了答案
          if (this.form.topicType === 0 || this.form.topicType === 1) {
            if (
              this.form.ccTopicOptionList.filter((item) => item.trueOption)
                .length === 0
            ) {
              this.$modal.msgWarning("请选择答案");
              return;
            } else if (this.form.ccTopicOptionList.length < 2) {
              this.$modal.msgWarning("选项不能少于两个");
              return;
            }
          } else if (this.form.topicType === 2) {
            if (this.form.right == null) {
              this.$modal.msgWarning("请选择该判断题是否正确");
              return;
            } else {
              this.form.ccTopicOptionList = this.form.right
                ? [{ optionLabel: "A", optionValue: "正确", trueOption: true }]
                : [{ optionLabel: "A", optionValue: "错误", trueOption: true }];
            }
          } else if (this.form.topicType === 3) {
            if (
              this.form.ccTopicOptionList.length !=
              this.form.content.match(/\(___\)/g).length
            ) {
              this.$modal.msgWarning("选项必须与填空数一致");
              return;
            }
            this.form.ccTopicOptionList.forEach((option) => {
              option.trueOption = true;
            });
          }
          this.form.optionCount = this.form.ccTopicOptionList.length;
          if (!this.model.categoryId || this.model.categoryId.length == 0) {
            this.form.categoryId = this.cid ? this.cid : this.propsCategoryId;
          }
          if (this.form.id != null) {
            console.log(this.form, "this.form");
            updateTopic(this.form).then(() => {
              this.$modal.msgSuccess("修改成功");
              if (this.form.titleId != null && this.form.titleId > 0) {
                this.$emit("handleClose", this.form.id, this.form.titleId);
              } else {
                this.$emit("handleClose", this.form.id, this.form.containerId);
              }
              this.form = {};
            });
          } else {
            console.log(this.form, "this.form");
            if (this.form.titleId != null && this.form.titleId > 0) {
              addPaperTopicFromPaper(this.form).then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.$emit("handleClose", response.data, this.form.titleId);
                this.form = {};
              });
            } else if (
              this.form.containerId != null &&
              this.form.containerId > 0
            ) {
              addContainerTopic(this.form).then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.$emit("handleClose");
                this.form = {};
              });
            } else {
              addTopic(this.form).then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.$emit("handleClose", response.data, this.form.titleId);
                this.form = {};
              });
            }
          }
        } else {
          this.$modal.msgWarning("请填写完边框变红的信息");
        }
      });
    },
    /**增加选项 */
    addOption() {
      
      if (!this.form.content || !this.form.ccTopicOptionList) {
        this.$message({
          type: "warning",
          message: "请先输入试题内容且设置填空符!",
        });
        return;
      }
      if (
        this.form.topicType === 3 &&
        this.form.ccTopicOptionList.length >=
          this.form.content.trim().match(/\(___\)/g).length
      ) {
        this.$message({
          type: "warning",
          message: "选项数量不能大于填空数量!",
        });
        return;
      }
      let maxId = 0;
      this.form.ccTopicOptionList.forEach((item) => {
        if (item.id > maxId) {
          maxId = item.id;
        }
      });
      maxId++;
      let right = false;
      if (this.form.topicType > 2) right = true;
      this.form.ccTopicOptionList.push({
        optionLabel: this.labelList[this.form.ccTopicOptionList.length],
        optionValue: "",
        trueOption: right,
        group: null,
        id: maxId,
      });
    },
    /**删除选项 */
    deleteOption(index) {
      this.form.ccTopicOptionList.splice(index, 1);
      for (let i = 0; i < this.form.ccTopicOptionList.length; i++) {
        this.form.ccTopicOptionList[i].optionLabel = this.labelList[i];
      }
    },
    /**选择题选项变动时 */
    optionSelectionChange(rows) {
      console.log(rows.length, this.form.topicType, ">>>>>>>>>>>>>");
      //单选题和选项大于1
      if (this.form.topicType == "0" && rows.length > 1) {
        //判断只有两个选项的单选题时 规避全选按钮引起的答案唯一性bug
        if (rows.length == 2 && this.form.ccTopicOptionList.length == 2) {
          this.$refs.multipleTable.clearSelection();
          rows = [];
        } else {
          this.$refs.multipleTable.clearSelection();
          //array.pop（）移除最后一个数组元素
          const popRow = rows.pop();
          this.$refs.multipleTable.toggleRowSelection(popRow);
          rows = [popRow];
        }
      }
      //配置答案的正确与否
      this.form.ccTopicOptionList.forEach((item) => {
        if (rows.find((row) => row.optionLabel === item.optionLabel)) {
          item.trueOption = true;
        } else {
          item.trueOption = false;
        }
      });
    },
    /**编辑页面修改试题类型 */
    handleEditTopicTypeChange(type) {
      console.log(type, "typetypetype");
      let flag = false;
      if (type === 0 || type === 1) {
        this.$set(this.form, "ccTopicOptionList", [
          {
            optionValue: "",
            optionLabel: "A",
            trueOption: false,
            group: null,
            id: 1,
          },
          {
            optionValue: "",
            optionLabel: "B",
            trueOption: false,
            group: null,
            id: 2,
          },
          {
            optionValue: "",
            optionLabel: "C",
            trueOption: false,
            group: null,
            id: 3,
          },
          {
            optionValue: "",
            optionLabel: "D",
            trueOption: false,
            group: null,
            id: 4,
          },
        ]);
        flag = true;
      } else if (type === 2) {
        this.$set(this.form, "trueOption", null);
      } else if (type === 3) {
        this.$set(this.form, "ccTopicOptionList", []);
        flag = true;
      } else if (type === 4 || type === 5) {
        // this.$set(this.form, "ccTopicOptionList", [
        //   { optionValue: "", optionLabel: "A", trueOption: true, group: null, id: 1 }
        // ])
        // flag = true
      }
      if (flag) {
        this.$nextTick(() => {
          this.drag();
        });
      }
    },
    /**设置行颜色 */
    rowStyle({ row }) {
      //判断row是否有group属性
      if (row.group) {
        return {
          "background-color": this.colorList[row.group],
          cursor: "pointer",
        };
      } else {
        return { "background-color": this.colorList[0], cursor: "pointer" };
      }
    },
    /**设置分组 */
    handleSetGroup() {
      let arr = this.form.ccTopicOptionList;
      if (arr.filter((item) => item.trueOption).length < 2) {
        this.$message.error({
          message: "请勾选至少两个答案进行分组",
          showClose: true,
        });
        return;
      }
      //判断arr中trueOption为true的项是否连续
      let flag = true;
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].trueOption) {
          if (i === 0) {
            if (!arr[i + 1].trueOption) {
              flag = false;
              break;
            }
          } else if (i === arr.length - 1) {
            if (!arr[i - 1].trueOption) {
              flag = false;
              break;
            }
          } else {
            if (!arr[i - 1].trueOption && !arr[i + 1].trueOption) {
              flag = false;
              break;
            }
          }
        }
      }
      if (!flag) {
        this.$message.error({
          message: "分为一组的答案必须相邻",
          showClose: true,
        });
        return;
      }
      //获取当前分组最大值
      let group = 0;
      arr.forEach((item) => {
        if (item.group != null && item.group > group) {
          group = item.group;
        }
      });
      if (group === 10) {
        for (let j = 1; j <= 10; j++) {
          if (arr.filter((item) => item.group === j).length === 0) {
            group = j;
            break;
          }
        }
      } else {
        group++;
      }
      //将选中的答案分组
      arr.forEach((item) => {
        if (item.trueOption) {
          item.group = group;
          item.trueOption = false;
        }
      });
      //重新渲染
      this.$nextTick(() => {
        this.form.ccTopicOptionList = arr;
        this.$refs.multipleTable.clearSelection();
        this.$message({
          type: "success",
          message: "设置分组成功!",
        });
      });
    },
    /**取消分组 */
    handleDeleteGroup() {
      let arr = this.form.ccTopicOptionList;
      arr.forEach((item) => {
        if (item.trueOption) {
          item.group = null;
        }
      });
      //重新渲染
      this.$nextTick(() => {
        this.form.ccTopicOptionList = arr;
        this.$refs.multipleTable.clearSelection();
        this.$message({
          type: "success",
          message: "取消分组成功!",
        });
      });
    },
    /**使el-table可以拖拽排序 */
    drag() {
      const el = document.querySelectorAll(
        ".drow_table .el-table__body-wrapper > table > tbody"
      )[0];
      Sortable.create(el, {
        handle: ".move", // 拖拽手柄
        disabled: false, // 拖拽不可用? false 启用
        ghostClass: "sortable-ghost", //拖拽样式
        animation: 150, // 拖拽延时，效果更好看
        onEnd: (e) => {
          // 拖拽结束时的触发
          let arr = this.form.ccTopicOptionList; // 获取表数据
          arr.splice(e.newIndex, 0, arr.splice(e.oldIndex, 1)[0]); // 数据处理
          this.$nextTick(() => {
            for (let i = 0; i < arr.length; i++) {
              arr[i].optionLabel = this.labelList[i];
            }
            this.form.ccTopicOptionList = arr;
          });
        },
      });
    },
    /**失去焦点时保存光标位置 */
    campaignNameBlur(e) {
      this.cursorPosition = e.srcElement.selectionStart;
    },
    /**光标处插入填空符 */
    handleAddBlank() {
      console.log(this.cursorPosition, this.form.content);
      let num = this.cursorPosition;
      let type = typeof num;
      let cont = this.form.content;
      let count = 0;
      if (type == "number" && num > 0) {
        //插入到指定光标处
        let right = cont.slice(0, num);
        let left = cont.slice(num);
        //获取right中(___)数量
        count = right.match(/\(__\)/g);
        this.form.content = right + "(___)" + left;
        this.cursorPosition = num + 5;
      } else {
        //没有指定插入直接添加到最后
        this.form.content += "(___)";
      }
      //联动在count处添加option
      // this.form.ccTopicOptionList.splice(count, 0, { optionValue: "", optionLabel: count, trueOption: true })
      // if (this.form.options&&this.form.options.length>0){
      //   this.form.options.forEach((item, index) => {
      //     if (index >= count) {
      //       item.optionLabel = index + 1
      //     }
      //   })
      // }
    },
    // 表单重置
    reset(titleId, containerId) {
      console.log("重置表单", titleId, containerId);
      this.model.categoryId = "";
      this.form = {
        id: null,
        parentTopicId: null,
        categoryId: null,
        content: "",
        contentPic: "",
        resolve: null,
        resolvePic: "",
        topicType: null,
        difficulty: 3,
        needDevice: null,
        score: null,
        optionCount: null,
        status: null,
        radioLabel: null,
        createTime: null,
        createBy: null,
        updateTime: null,
        updateBy: null,
        trueOption: null,
        categoryTreeEdit: false,
        titleId: titleId,
        containerId: containerId,
        ccTopicOptionList: [
          {
            optionLabel: "A",
            optionValue: "",
            trueOption: false,
          },
          {
            optionLabel: "B",
            optionValue: "",
            trueOption: false,
          },
          {
            optionLabel: "C",
            optionValue: "",
            trueOption: false,
          },
          {
            optionLabel: "D",
            optionValue: "",
            trueOption: false,
          },
        ],
      };

      this.refreshCategoryTree();
      this.resetForm("form");
    },
    // 表单加载数据
    async getTopicInfo(topicId, titleId, containerId) {
      console.log("表单加载数据", topicId, titleId);
      this.reset(titleId, containerId);
      let response;
      if (this.needTitleId) {
        response = await getPaperTopic(topicId, titleId);
      } else {
        response = await getTopic(topicId);
      }
      this.model.categoryId = response.data.categoryId;
      this.form = response.data;
      console.log(this.form);
      this.$set(this.form, "titleId", titleId);
      this.$set(this.form, "containerId", containerId);
      this.refreshCategoryTree();
      if (
        this.form.topicType === 0 ||
        this.form.topicType === 1 ||
        this.form.topicType === 3
      ) {
        this.$nextTick(() => {
          this.$refs.multipleTable.clearSelection();
          if (this.form.topicType != 3) {
            this.form.ccTopicOptionList
              .filter((item) => item.trueOption)
              .forEach((item) => {
                this.$refs.multipleTable.toggleRowSelection(item);
              });
          }
          this.drag();
        });
      } else if (this.form.topicType === 2) {
        this.$set(
          this.form,
          "right",
          this.form.ccTopicOptionList[0].optionValue === "正确"
        );
      } else {
        this.$nextTick(() => {
          this.drag();
        });
      }
    },
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  height: calc(100vh - 280px);
  overflow: auto;
}
.topicForm {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.formFooter {
  box-sizing: inherit;
  text-align: right;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, Arial, sans-serif;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
  height: 32px;
}

.show-hide:hover :nth-child(2) {
  display: inline-block !important;
}

::v-deep .el-input--mini .el-input__inner {
  height: 25px;
  text-align: center;
  line-height: 25px;
}
</style>
